<template>
  <el-drawer
    :title="title"
    :visible.sync="_multiInstanceDrawer"
    direction="rtl"
    @open="init"
  >
    <div style="padding: 10px">
      <el-form
        ref="multiInstanceForm"
        :model="multiInstance"
        label-width="80px"
      >
        <el-form-item label="多实例类型">
          <el-select v-model="multiInstance.isSequential" clearable>
            <el-option
              v-for="item in multiInstanceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="循环基数" prop="loopCardinality">
          <el-input v-model="multiInstance.loopCardinality" clearable />
        </el-form-item>
        <el-form-item label="集合">
          <el-input v-model="multiInstance.collection" clearable />
        </el-form-item>
        <el-form-item label="元素变量">
          <el-input v-model="multiInstance.elementVariable" clearable />
        </el-form-item>
        <el-form-item label="完成条件">
          <el-input v-model="multiInstance.completionCondition" clearable />
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button icon="el-icon-close" @click="_multiInstanceDrawer = false"
          >取消</el-button
        >
        <el-button icon="el-icon-check" type="primary" @click="save"
          >确定</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import mixinPanel from "../mixins/mixinPanel";

export default {
  props: {
    multiInstanceDrawer: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },
  mixins: [mixinPanel],
  computed: {
    _multiInstanceDrawer: {
      get() {
        return this.multiInstanceDrawer;
      },
      set(v) {
        this.$emit("changeMultiInstanceDrawer", v);
      },
    },
  },
  data() {
    return {
      multiInstanceOptions: [
        {
          value: undefined,
          label: "",
        },
        {
          value: true,
          label: "串行",
        },
        {
          value: false,
          label: "并行",
        },
      ],
      multiInstance: {
        isSequential: "",
        loopCardinality: "",
        collection: "",
        elementVariable: "",
        completionCondition: "",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const loopCharacteristics = this.element.businessObject
        && this.element.businessObject.loopCharacteristics;
      const isSequential =
        loopCharacteristics === undefined
          ? undefined
          : loopCharacteristics.isSequential || false;
      const data = {};
      data.isSequential = isSequential;
      data.collection = loopCharacteristics && loopCharacteristics.collection;
      data.elementVariable = loopCharacteristics && loopCharacteristics.elementVariable;
      data.loopCardinality = loopCharacteristics && loopCharacteristics.loopCardinality && loopCharacteristics.loopCardinality.body;
      data.completionCondition = loopCharacteristics && loopCharacteristics.completionCondition && loopCharacteristics.completionCondition.body;

      this.multiInstance = data;
    },
    save() {
      let hasMultiInstance = false;
      if (
        this.multiInstance.isSequential === undefined ||
        this.multiInstance.isSequential === ""
      ) {
        delete this.element.businessObject.loopCharacteristics;
        this.multiInstance = {};
        this.updateProperties({ loopCharacteristics: undefined });
      } else {
        let loopCharacteristics = this.element.businessObject
          .loopCharacteristics;
        if (!loopCharacteristics) {
          loopCharacteristics = this.modeler
            .get("moddle")
            .create("bpmn:MultiInstanceLoopCharacteristics");
        }

        loopCharacteristics.isSequential = this.multiInstance.isSequential;

        if (this.multiInstance.collection) {
          loopCharacteristics.set(
            this.descriptorPrefix + "collection",
            this.multiInstance.collection
          );
        } else {
          loopCharacteristics.set(
            this.descriptorPrefix + "collection",
            undefined
          );
        }
        if (this.multiInstance.elementVariable) {
          loopCharacteristics.set(
            this.descriptorPrefix + "elementVariable",
            this.multiInstance.elementVariable
          );
        } else {
          loopCharacteristics.set(
            this.descriptorPrefix + "elementVariable",
            undefined
          );
        }
        if (this.multiInstance.loopCardinality) {
          const loopCardinality = this.modeler
            .get("moddle")
            .create("bpmn:Expression", {
              body: this.multiInstance.loopCardinality,
            });
          loopCharacteristics["loopCardinality"] = loopCardinality;
        } else {
          loopCharacteristics["loopCardinality"] = undefined;
        }
        if (this.multiInstance.completionCondition) {
          const completionCondition = this.modeler
            .get("moddle")
            .create("bpmn:Expression", {
              body: this.multiInstance.completionCondition,
            });
          loopCharacteristics["completionCondition"] = completionCondition;
        } else {
          loopCharacteristics["completionCondition"] = undefined;
        }
        this.updateProperties({ loopCharacteristics });
        hasMultiInstance = true;
      }
      this._multiInstanceDrawer = false;
      this.$emit("saveMultiInstance", hasMultiInstance);
    },
  },
};
</script>

<style>
/*.muti-instance .el-form-item {
        margin-bottom: 22px;
    }*/
</style>
